<template>
  <!-- 头部搜索 -->
  <van-search v-model="value" @click-input="$router.push('/search')" shape="round" show-action background="#4fc08d" placeholder="卡姿兰大眼睛">
    <template #left>
      <div @click="$router.push('/mine')" class="btnHeader btnHeaderOne">地址</div>
    </template>
    <template #action>
      <div @click="$router.push('/login')" v-if="!goPage" class="btnHeader">登录</div>
      <div @click="$router.push('/mine')" v-else class="btnHeader">我的</div>
    </template>
  </van-search>

  <!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="1200" indicator-color="white">
    <van-swipe-item v-for="item in swipeList"><img :src="item.img"></van-swipe-item>
  </van-swipe>

  <!-- 导航部分 -->
  <ul class="navLi">
    <li><img src="./../assets/imgs/01.png">
      <p>京东超市</p>
    </li>
    <li><img src="./../assets/imgs/02.png">
      <p>数码电器</p>
    </li>
    <li><img src="./../assets/imgs/03.png">
      <p>京东新百货</p>
    </li>
    <li><img src="./../assets/imgs/04.png">
      <p>京东生鲜</p>
    </li>
    <li><img src="./../assets/imgs/05.png">
      <p>京东超市</p>
    </li>
    <li><img src="./../assets/imgs/06.png">
      <p>京东到家</p>
    </li>
    <li><img src="./../assets/imgs/07.png">
      <p>京超市</p>
    </li>
    <li><img src="./../assets/imgs/08.png">
      <p>数码电器</p>
    </li>
    <li><img src="./../assets/imgs/09.png">
      <p>京东新百货</p>
    </li>
    <li><img src="./../assets/imgs/10.png">
      <p>京东生鲜</p>
    </li>
  </ul>

  <!-- 列表 -->
  <div class="list">
    <!-- 秒杀商品 -->
    <nav>
      <h6>京东秒杀</h6>
      <p>{{ new Date().getHours() }}点专场</p>
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
    </nav>
    <van-grid :border="false" :column-num="6.5" style="height:210px;margin-top: -20px;">
      <van-grid-item v-for="value in killList" :key="value.proid" style="font-size:10px">
        <van-image :src="value.img1" style="height:110px" />
        <p style="font-size:2.667vw;color: red">￥{{ value.originprice }}</p>
      </van-grid-item>
    </van-grid>

    <!-- 商品列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell class="cell" v-for="item in goodsList" :key="item.proid" @click="$router.push('/details/' + item.proid)">
        <img :src="item.img1" alt="">
        <h6>{{ item.proname }}</h6>
        <p>￥{{ item.originprice }}</p>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { swipeList, seckilllist, goodsList } from '../server/home.js'
export default {
  data() {
    return {
      value: "",
      time: 10000000,
      finished: false,
      loading: false,
      swipeList: [],
      killList: [],
      goodsList: [],
      currentPage: 1,
    }
  },

  created() {
    this.swiper()
    this.kill()
  },

  // 通过token判断有没有登录
  computed: {
    goPage() {
      return localStorage.getItem('token')
    }
  },


  methods: {
    // 异步加载商品列表数据
    onLoad() {
      goodsList(this.currentPage).then((res) => {
        if (res.code === "200") {
          this.goodsList = this.goodsList.concat(res.data)
          this.loading = false
          this.currentPage++
          if (this.goodsList.length >= 200) {
            this.finished = true
          }
        }
      })
    },

    // 轮播图数据
    swiper() {
      swipeList().then((res) => {
        if (res.code === "200") {
          this.swipeList = res.data
        }
      })
    },

    // 秒杀商品数据
    kill() {
      seckilllist(this.currentPage).then((res) => {
        if (res.code === "200") {
          this.killList = res.data
        }
      })
    }
  }
}

</script>
<style scoped>
/* 头部 */
.van-search--show-action {
  background-color: red !important
}

.btnHeader {
  font-size: 4vw;
  color: #fff;
}

.btnHeaderOne {
  padding-right: 7.95733px;
}

/* 轮播图 */
.my-swipe .van-swipe-item {
  height: 200px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

.my-swipe {
  margin: 30px;
  text-align: center;
  line-height: 30px;
}

.my-swipe .van-swipe__track img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

/* 导航区域 */
.navLi {
  font-size: 2.5vw;
  color: #2c3e50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  height: 177.59px;
}

.navLi li {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.navLi img {
  width: 28px;
  height: 28px;
}

/* 列表 */
.list {
  background-color: white;
  margin: 0 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/* 倒计时器 */
.list>nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}

.list>nav>h6 {
  font-size: 16px;
  padding: 0 18px;
}

.list>nav>p {
  font-size: 16px;
  color: red;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #1989fa;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  font-size: 18px;
}

/* 商品列表页 */
.van-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.van-list .cell {
  width: 49%;
  margin-bottom: 15px;
}

.van-list img {
  width: 100%;
}

.van-list h6 {
  font-size: 12px;
  color: #2c3e50;
  margin-top: 5px;
  text-align: left;
}

.van-list p {
  font-size: 16px;
  color: #ee0a24;
  margin-top: -15px;
  font-weight: 800;
  text-align: left;
}
</style>